---
name: useVirtualList
route: /useVirtualList
menu: 'UI'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';

# useVirtualList

提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。

## 代码演示

### 默认用法

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='默认用法' description='渲染大量数据'>
  <Demo1 />
</JackBox>

### 动态元素高度

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='动态元素高度' description='动态指定每个元素的高度'>
  <Demo2 />
</JackBox>

## API

```typescript
const result:Result = useVirtualList(originalList: any[], Options);
```

### Result

| 参数     | 说明                                     | 类型       |
|----------|------------------------------------------|------------|
| list  | 当前需要展示的列表内容                             | {data: T, index: number}[]    |
| containerProps     | 滚动容器的 props                             | {}        |
| wrapperProps | children 外层包裹器 props   | {} |
| scrollTo    | 快速滚动到指定 index                          | (index: number) => void        |

### Params

| 参数    | 说明                                         | 类型                   | 默认值 |
|---------|----------------------------------------------|------------------------|--------|
| originalList | 包含大量数据的列表 | T[] | []      |
| options | 可选配置项，见 Options                       | -                      | -      |


### Options

| 参数 | 说明         | 类型   | 默认值 |
|------|--------------|--------|--------|
| itemHeight | 行高度，静态高度可以直接写入像素值，动态高度可传入函数 | number \| ((index: number) => number) | -    |
| overscan | 视区上、下额外展示的 dom 节点数量 | number | 10    |